<template>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">学生列表</h5>
      <ul class="list-group">
        <li 
          v-for="(student, index) in students" 
          :key="index" 
          class="list-group-item d-flex justify-content-between align-items-center"
        >
          <div>
            <span class="fw-bold">{{ student.name }}</span>
            <span class="ms-3">年龄: {{ student.age }}</span>
            <span class="ms-3">性别: {{ student.gender === 'male' ? '男' : '女' }}</span>
          </div>
          <button 
            @click="$emit('delete', index)" 
            class="btn btn-danger btn-sm"
          >
            删除
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  students: {
    type: Array,
    required: true
  }
});
</script>

<style scoped>
.list-group-item {
  padding: 0.75rem 1.25rem;
}
</style>
